<template>
    <div>
        <BreadCrumb />
        <div class="content">
            <span>订单合同:</span><el-button @click="dialogVisible = true">查看合同</el-button>
        </div>
        <!-- dialog -->
        <el-dialog title="PDF打印" :visible="dialogVisible" width="60%" :before-close="handleClose">
            <!-- 图片集合容器 -->
            <div id="printableArea">
                <img src="/11.jpg" style="width: 350px;height: 250px;page-break-after: always;">
                <img src="/feng.png" style="width: 350px;height: 250px;page-break-after: always;">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="printJS">打 印</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import print from 'print-js'

export default {
    name: 'contract-page',
    data() {
        return {
            dialogVisible: false
        }
    },
    methods: {
        printJS() {
            this.dialogVisible = false
            const pdfData = {  // 配置
                printable: 'printableArea', // 这里应该是你要打印内容的容器的ID
                type: 'html',
                scanStyles: false,
                style: `@page { size: auto;  margin: 0mm; }, image { display: block; max-width: 100% ;}`
            };
            print(pdfData);
        },
        handleClose() { }
    }
}
</script>
<style scoped lang="less">
.content {
    background-color: #fff;
    padding: 15px;

    span {
        margin-right: 20px;
    }
}
</style>